<template>
  <div style="width: 100%; position: relative; height: 100%" class="maxx">
    <!-- <div class="myChart" ref="myChart"></div> -->
    <div class="zb_space">
      <div class="lenth">
        <div class="tag" style="background: #4baf02"></div>
        <div>
          <dv-decoration-11 style="width: 200px; height: 60px"
            >大料箱库位总量
            <div class="num">{{ Infos.bigBoxLocNumber }}</div></dv-decoration-11
          >
        </div>
      </div>

      <div class="lenth">
        <div class="tag" style="background: #eaf112"></div>
        <div>
          <dv-decoration-11 style="width: 200px; height: 60px">
            订单总量
            <div class="num">{{ Infos.orderTotal }}</div></dv-decoration-11
          >
        </div>
      </div>

      <div class="lenth">
        <div class="tag" style="background: #aed80c"></div>
        <div>
          <div>
            <dv-decoration-11 style="width: 200px; height: 60px"
              >小料箱库位总量
              <div class="num">
                {{ Infos.smallBoxLocNumber }}
              </div></dv-decoration-11
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// http://echarts.zhangmuchen.top/#/detail?cid=xT1JWXkiKc
import * as echarts from "echarts";
import { api } from "@/utils/api";

// getNdsdImportantParamsAPI
export default {
  name: "Proportion",
  data() {
    return {
      myCharts: null,
      Infos: {},
      timer: null,
    };
  },
  mounted() {
    this.getNdsdImportantParams();
    this.OptionSet();
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    } else {
      this.timer = setInterval(() => {
        this.getNdsdImportantParams();
      }, 10000);
    }
  },
  destroyed() {
    clearInterval(this.timer);
    this.timer = null;
  },
  methods: {
    getNdsdImportantParams() {
      return new Promise(async (reslove, reject) => {
        let params = {};
        let [ERR, LRES] = await api.getNdsdImportantParamsAPI();
        this.Infos = LRES.data;
        reslove(LRES.data);
        // console.log("getNdsdImportantParams", LRES);
      });
    },
    OptionSet() {
      let myCharts = echarts.init(this.$refs.myChart);
      const mockData = [
        { total: "550", detail: "test1" },
        { total: "106", detail: "test2" },
        { total: "275", detail: "test3" },
        { total: "222", detail: "test4" },
        { total: "0", detail: "test5" },
      ];
      let num = 0;
      let option = {
        // backgroundColor: "#111",
        label: {
          show: false,
        },
        title: [
          {
            text: "利用率",
            x: "22%",
            top: "52%",
            textStyle: {
              color: "#fdf914",
              fontSize: 16,
              fontWeight: "100",
            },
          },
          {
            text: "62%",
            x: "22%",
            top: "36%",
            textStyle: {
              fontSize: "24",
              color: "#fdf914",
              fontFamily: "Lato",
              foontWeight: "600",
            },
          },
        ],
        polar: {
          radius: ["74%", "80%"],
          center: ["30%", "50%"],
          //   center: ["50%", "50%"],
        },
        angleAxis: {
          max: 100,
          show: false,
        },
        radiusAxis: {
          type: "category",
          show: true,
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            // name: "test1",
            type: "bar",
            roundCap: true,
            barWidth: 60,
            showBackground: true,
            backgroundStyle: {
              color: "rgba(66, 66, 66, .3)",
            },
            data: [66],
            coordinateSystem: "polar",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: "#fdf914",
                  },
                  {
                    offset: 1,
                    color: "#38a700",
                  },
                ]),
              },
            },
          },
          {
            type: "gauge",
            // name: "test2",
            radius: "87%",
            startAngle: "0",
            endAngle: "-359.99",
            splitNumber: "200",
            center: ["30%", "50%"],
            pointer: {
              show: false,
            },
            title: {
              show: false,
            },
            detail: {
              show: false,
            },
            data: [
              {
                value: 95,
                name: "",
              },
            ],
            axisLine: {
              lineStyle: {
                width: 20,
                opacity: 0,
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              length: 13,
              lineStyle: {
                color: {
                  type: "linear",
                  x: 1,
                  y: 0,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#111",
                    },
                    {
                      offset: 0.5,
                      color: "rgba(66, 66, 66, 1)",
                    },
                    {
                      offset: 1,
                      color: "#111",
                    },
                  ],
                  globalCoord: false,
                },
                width: 1,
                type: "solid",
              },
            },
            axisLabel: {
              show: false,
            },
          },
          {
            // name: "test3",
            type: "pie",
            startAngle: 90,
            radius: ["60%", "62%"],
            hoverAnimation: false,
            center: ["30%", "50%"],
            itemStyle: {
              normal: {
                labelLine: {
                  show: false,
                },
                color: "rgba(66, 66, 66, .4)",
                shadowBlur: 10,
                shadowColor: "rgba(253, 249, 20, .3)",
              },
            },
            data: [
              {
                value: 100,
              },
            ],
          },
          {
            name: "",
            type: "pie",
            startAngle: 90,
            radius: ["62.5%", "64%"],
            hoverAnimation: false,
            center: ["30%", "50%"],
            itemStyle: {
              normal: {
                labelLine: {
                  show: false,
                },
                color: "rgba(66, 66, 66, .3)",
                shadowBlur: 10,
                shadowColor: "rgba(253, 249, 20, .3)",
              },
            },
            data: [
              {
                value: 100,
              },
            ],
          },
          {
            name: "",
            type: "pie",
            startAngle: 90,
            radius: ["64.5%", "65.8%"],
            hoverAnimation: false,
            center: ["30%", "50%"],
            itemStyle: {
              normal: {
                labelLine: {
                  show: false,
                },
                color: "rgba(66, 66, 66, .2)",
                shadowBlur: 10,
                shadowColor: "rgba(253, 249, 20, .3)",
              },
            },
            data: [
              {
                value: 100,
              },
            ],
          },
          {
            name: "",
            type: "pie",
            startAngle: 90,
            radius: ["66.5%", "67.5%"],
            hoverAnimation: false,
            center: ["30%", "50%"],
            itemStyle: {
              normal: {
                labelLine: {
                  show: false,
                },
                color: "rgba(66, 66, 66, .1)",
                shadowBlur: 10,
                shadowColor: "rgba(253, 249, 20, .3)",
              },
            },
            data: [
              {
                value: 100,
              },
            ],
          },
          {
            name: "",
            type: "custom",
            coordinateSystem: "none",
            center: ["30%", "50%"],
            renderItem: function (params, api) {
              return {
                type: "arc",
                shape: {
                  cx: api.getWidth() / (100 / 30),
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.545,
                  startAngle: ((0 + num) * Math.PI) / 180,
                  endAngle: ((1 + num) * Math.PI) / 180,
                },
                style: {
                  stroke: "#fdf914",
                  fill: "transparent",
                  lineWidth: 5,
                },
                silent: true,
              };
            },
            data: [0],
          },
        ],
      };
      myCharts.setOption(option, true);

      //   function numb() {
      //     num = num + 5;
      //     myCharts.setOption(option, true);
      //   }
      //   setInterval(function () {
      //     numb();
      //     console.log("numb", numb);
      //   }, 100);
    },
  },
};
</script>
<style lang="scss" scoped>
// .max {
//   height: calc(99% - 30px);
// }
@font-face {
  font-family: "FZY4JW";
  src: url("../../assets/font/FZY4JW.TTF");
}
@font-face {
  font-family: "FZZiYHJW";
  src: url("../../assets/font/FZZiYHJW.TTF");
}
.zb_space {
  display: flex;
  justify-content: space-between;
  //   border: 1px solid red;
  width: 100%;
  margin-top: 40px;
  font-family: "FZY4JW";
  //   .lenth {
  //     display: flex;
  //     justify-content: center;
  //     align-items: center;
  .num {
    font-size: 28px;
    padding-left: 8px;
    bottom: 2px;
  }
  //     span {
  //       font-size: 28px;
  //     }
  //   }
  //   .tag {
  //     width: 8px;
  //     height: 8px;
  //     background: fuchsia;
  //     border-radius: 50%;
  //     margin-right: 5px;
  //   }
  //   width: 40%;
  //   height: 80%;
  //   position: absolute;
  //   right: 0;
  //   top: 0;
  //   bottom: 0;
  //   margin: auto;
}
.myChart,
.myChart2 {
  width: 100%;
  height: 100%;
}
</style>
